<template>
  <div>
    <el-card class="boox-card">
      <el-button type="primary" @click="dialogFormVisible = true">发布志愿活动</el-button>
      <el-dialog title="活动详情" :visible.sync="dialogFormVisible">
        <el-form ref="form" :model="form" label-position="left" label-width="120px">

           <el-form-item label="活动名称">
                 <el-input v-model="form.vname"></el-input>
           </el-form-item>

          <el-form-item label="具体介绍">
                 <el-input type="textarea" v-model="form.task"></el-input>
          </el-form-item>

          <el-form-item label="活动地点">
                <el-input v-model="form.vspot"></el-input>
          </el-form-item>

          <el-form-item label="活动时间">
                <el-input v-model="form.activitytime"></el-input>
          </el-form-item>

  

           <el-form-item label="报名开始时间">
                <el-input v-model="form.starttime"></el-input>
            </el-form-item>
          <el-form-item label="报名截止时间">
                <el-input v-model="form.deadline"></el-input>
          </el-form-item>
          <el-form-item label="招募人数">
                <el-input v-model="form.headcount"></el-input>
          </el-form-item>
          <el-form-item label="志愿时长">
                <el-input v-model="form.vtime"></el-input>
          </el-form-item>
          <el-form-item label="活动报酬">
                <el-input v-model="form.reward"></el-input>
          </el-form-item>

          
          <el-form-item>
    <el-button type="primary" @click="onSubmit('form')">立即创建</el-button>
    <el-button @click="dialogFormVisible = false">取消</el-button>
  </el-form-item>
</el-form>
</el-dialog>
<div>
  <br/>
</div>
    
    <el-table  :data="activityList" border stripe>
      <el-table-column type="index>" prop="vno"></el-table-column>
      <el-tableColumn label="活动名称" prop="vname"></el-tableColumn>
      <el-tableColumn label="活动地点" prop="vspot"></el-tableColumn>
      <el-tableColumn label="活动时间" prop="activitytime"></el-tableColumn>
      <el-tableColumn label="招募人数" prop="headcount"></el-tableColumn>
      <el-tableColumn label="志愿时长" prop="vtime"></el-tableColumn>
      <el-tableColumn label="操作" with="180px">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.vno)"></el-button>
         <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeActivityById(scope.row.vno)"></el-button>
         <router-link :to="{name:'checkSignup',params:{vno:scope.row.vno}}"><el-button type="info" size="mini">查看报名情况</el-button></router-link>
        </template>
      </el-tableColumn>



    </el-table>
    </el-card>
    
    <!--------修改活动对话框-->
    <el-dialog title="修改活动" :visible.sync="editDialogVisible" width="50%">
      <el-form ref="editActivityFormRef" :model="editActivityForm" @close="editDialogClosed" label-position="left" label-width="120px">

<el-form-item label="活动名称" prop="vname">
      <el-input v-model="editActivityForm.vname"></el-input>
</el-form-item>

<el-form-item label="具体介绍" prop="task">
      <el-input type="textarea" v-model="editActivityForm.task"></el-input>
</el-form-item>

<el-form-item label="活动地点" prop="vspot">
     <el-input v-model="editActivityForm.vspot"></el-input>
</el-form-item>

<el-form-item label="活动时间" prop="activitytime">
     <el-input v-model="editActivityForm.activitytime"></el-input>
</el-form-item>



<el-form-item label="报名开始时间" prop="starttime">
     <el-input v-model="editActivityForm.starttime"></el-input>
 </el-form-item>
<el-form-item label="报名截止时间" prop="deadline">
     <el-input v-model="editActivityForm.deadline"></el-input>
</el-form-item>
<el-form-item label="招募人数" prop="headcount">
     <el-input v-model="editActivityForm.headcount"></el-input>
</el-form-item>
<el-form-item label="志愿时长" prop="vtime">
     <el-input v-model="editActivityForm.vtime"></el-input>
</el-form-item>
<el-form-item label="活动报酬" prop="reward">
     <el-input v-model="editActivityForm.reward"></el-input>
</el-form-item>


<el-form-item>
<el-button type="primary" @click="editActivityInfo">确定</el-button>
<el-button @click="editDialogVisible = false">取消</el-button>
</el-form-item>
</el-form>
    </el-dialog>
    

  </div>
</template>

<script>


export default {

data() {
  
  return {
       activityList:[],    
       dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        vname: '',
        task: '',
        vspot: '',
        activitytime: '',
        starttime: '',
        deadline: '',
        headcount:'',
        vtime:'',
        reward:'',
        pubid:'',
  },
  //控制修改活动对话框的显示与隐藏
  editDialogVisible:false,
    //修改活动的表单数据
    editActivityForm:{},
  }
},
created(){
  this.getActivityList()
  
},
methods: {
  onSubmit(form) {
      this.$refs[form].validate((valid) => {
      this.loading = true;  // 提交按钮显示加载动画
      if (valid) {
        var pubid1=JSON.parse(sessionStorage.getItem('userInfo'));
        var vpub=pubid1.pubid;
        let _this = this;
        this.axios({     // axios 向后端发起请求
          url: "/api/volunteering/save",  // 请求地址
          method: "post",             // 请求方法
          headers: {                  // 请求头
            "Content-Type": "application/json",
          },
          data: { // 请求参数，为 data，与登录的 params 不太一样
            vname: _this.form.vname,
            task: _this.form.task,
            vspot:_this.form.vspot,
            activitytime:_this.form.activitytime,
            starttime:_this.form.starttime,
            deadline:_this.form.deadline,
            headcount:_this.form.headcount,
            vtime:_this.form.vtime,
            reward:_this.form.reward,
            pubid:vpub,
          },
        }).then((res) => { // 当收到后端的响应时执行该括号内的代码，res 为响应信息，也就是后端返回的信息
          if (res.data.code === '0') {  // 当响应的编码为 0 时，说明注册成功
            // 显示后端响应的成功信息
            this.$message({
              message: res.data.msg,
              type: "success",
            });
          }else{  // 当响应的编码不为 0 时，说明注册失败
            // 显示后端响应的失败信息
            this.$message({
              message: res.data.msg,
              type: "warning",
            });
          }
          
        });
      
      }
    });
  },
   getActivityList(){
   
              //2.使用axios发送ajax请求
              //axios.提交方式(“请求s接口路径”).then(箭头函数).catch(箭头函数|)
              var pubid1=JSON.parse(sessionStorage.getItem('userInfo'));
              var vpub=pubid1.pubid;
              //var url="/api/volunteering/ownlist";
              
              this.axios({
                url:"/api/volunteering/ownlist",
                method:"get",
                headers: {                  // 请求头
            "Content-Type": "application/json",
          },
          params: { // 请求参数，为 data，与登录的 params 不太一样
            pubid:vpub,
          },
              }).then(response=>{
                    //response就是请求后返回的数据，response可以任意取名
                    // console.log(response)
                    //通过response获取具体数据，赋值给定义空数组
                    if((response.data.code == 0)){
                    this.activityList = response.data.data
                } else {
                    alert(response.data.msg)
                }
                   
                    
                })//请求成功执行then方法
                .catch(error=>{
                    alert(error);
                   
                })//请求失败执行catch方法
          },
    showEditDialog(vno){
      
         this.axios({
                  url:"/api/volunteering/detail",
                  method:"get",
                  
          params: { // 请求参数，为 data，与登录的 params 不太一样
            vno:vno,
          },
                })
                  .then(response=>{
                      //response就是请求后返回的数据，response可以任意取名
                      // console.log(response)
                      //通过response获取具体数据，赋值给定义空数组
                      if(response.data.code == 0){
                      this.editDialogVisible=true
                      this.editActivityForm = response.data.data[0]
                  } else {
                      alert(response.data.msg)
                  }
                      
                      console.log(vno)
                      
                  })//请求成功执行then方法
                  .catch(error=>{
                      alert(error);
                     
                  })//请求失败执行catch方法
            },
    editDialogClosed(){
              this.$refs.editActivityFormRef.resetFields()
            },
   editActivityInfo(){
              this.$refs.editActivityFormRef.validate((valid)=>{
                if (valid) {
          let _this = this;
          this.axios({     // axios 向后端发起请求
            url: "/api/volunteering/update",  // 请求地址
            method: "put",             // 请求方法
            headers: {                  // 请求头
              "Content-Type": "application/json",
            },
            
            data: { // 请求参数，为 data，与登录的 params 不太一样
              vno:_this.editActivityForm.vno,
              vname: _this.editActivityForm.vname,
              task: _this.editActivityForm.task,
              vspot:_this.editActivityForm.vspot,
              activitytime:_this.editActivityForm.activitytime,
              starttime:_this.editActivityForm.starttime,
              deadline:_this.editActivityForm.deadline,
              headcount:_this.editActivityForm.headcount,
              vtime:_this.editActivityForm.vtime,
              reward:_this.editActivityForm.reward,
              pubid:_this.editActivityForm.pubid,
            },
          })
            }
            this.editDialogVisible=false
            this.getActivityList()
            this.$message.success('更新活动信息成功！')
          })
    },
    
 removeActivityById(vno){

this.$confirm(
  '此操作将永久删除该志愿活动，是否继续？',
  '提示',
  {confirmButtonText:'确定',
cancelButtonText:'取消',
type:"warning",}
).then(()=>{
  this.axios({     // axios 向后端发起请求
        url: "/api/volunteering/delete",  // 请求地址
        method: "delete",             // 请求方法
        headers: {                  // 请求头
          "Content-Type": "application/json",
        },
        params: { // 请求参数，为 data，与登录的 params 不太一样
          vno:vno,
        },
      })
    .then((response) => {
      if(response.data.code==0)
      console.log("Delete Successfully"), 
      this.getActivityList()
    })
  })
  },
  
    

          }
        }




</script>

<style lang="less" scoped>
</style>